<template>
  <div class="company-profile-page">
    <el-card>
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <span>企业个人中心</span>
          <div style="display: flex; align-items: center; gap: 8px">
            <el-button @click="fetchCompanyInfo" :loading="loading">刷新</el-button>
            <el-button @click="openEditDialog">编辑资料</el-button>
          </div>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="公司账号">{{ companyInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="公司名称">{{ companyInfo.nickname }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ companyInfo.password }}</el-descriptions-item>
        <el-descriptions-item label="公司简介">{{
          companyInfo.companyIntroduction
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 编辑资料弹窗 -->
    <el-dialog title="编辑企业资料" v-model="dialogVisible" width="500px">
      <el-form :model="form" label-width="90px" :rules="rules" ref="formRef">
        <el-form-item label="公司账号" prop="username">
          <el-input v-model="form.username" disabled />
        </el-form-item>
        <el-form-item label="公司名称" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="公司简介" prop="companyIntroduction">
          <el-input v-model="form.companyIntroduction" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="dialogLoading">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getAllComs, updateCom } from '@/api/company'
import { showCustomMessage } from '@/utils/message'
import type { FormInstance, FormRules } from 'element-plus'

const companyInfo = reactive({
  username: '',
  nickname: '',
  password: '',
  companyIntroduction: '',
})

const loading = ref(false)
const dialogVisible = ref(false)
const dialogLoading = ref(false)
const formRef = ref<FormInstance>()
const form = reactive({
  username: '',
  nickname: '',
  password: '',
  companyIntroduction: '',
})

const rules: FormRules = {
  nickname: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  companyIntroduction: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
}

// 假设当前登录企业账号为本地存储或全局状态
const currentUsername = localStorage.getItem('companyUsername') || ''

const fetchCompanyInfo = async () => {
  loading.value = true
  try {
    // 只查当前企业账号
    const res = await getAllComs({ username: currentUsername })
    const info = res.data.list && res.data.list[0] ? res.data.list[0] : {}
    Object.assign(companyInfo, info)
  } catch (e: any) {
    showCustomMessage('获取企业信息失败: ' + e.message, 'error')
  } finally {
    loading.value = false
  }
}

const openEditDialog = () => {
  Object.assign(form, companyInfo)
  dialogVisible.value = true
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid: boolean) => {
    if (!valid) return
    dialogLoading.value = true
    try {
      await updateCom(form)
      showCustomMessage('企业资料更新成功', 'success')
      dialogVisible.value = false
      fetchCompanyInfo()
    } catch (e: any) {
      showCustomMessage('企业资料更新失败: ' + e.message, 'error')
    } finally {
      dialogLoading.value = false
    }
  })
}

onMounted(() => {
  fetchCompanyInfo()
})
</script>

<style scoped>
.company-profile-page {
  padding: 20px;
}
</style>
